<template>
  <div>
    <!-- 查询 -->
    <el-popover placement="bottom-start" width="820"  trigger="click">
      <el-form :inline="true" label-width="90px" :model="search"  class="search-panle">
        <el-form-item label="操作人姓名" ><el-input v-model="search.username" ></el-input></el-form-item>
        <el-form-item label="发生时间" ><el-date-picker v-model="search.reqTime"  type="daterange"   range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" align="right"></el-date-picker></el-form-item>
        <el-button type="primary" @click="searchClick">提交</el-button>
      </el-form>
      <el-button slot="reference" type="primary">查询</el-button>
    </el-popover>
    <!-- 表格 -->
    <el-table :data="tableData" stripe border class="company-table" :height="tableHeight" style="width: 100%;"  v-loading="loading">
      <el-table-column fixed type="index" label="*" sortable align="center" min-width="40"></el-table-column>
      <el-table-column prop="username" label="操作人用户名" sortable min-width="110"></el-table-column>
      <el-table-column prop="reqModular" label="请求模块" sortable min-width="90"></el-table-column>
      <el-table-column prop="operParam" label="操作参数" sortable min-width="130"></el-table-column>
      <el-table-column prop="reqTime" label="操作时间" sortable min-width="170">
        <template slot-scope="scope">
          <div v-text=" timestampToTime(scope.row.reqTime,'yyyy-mm-dd hh:mm:ss')">
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="operation" label="操作" sortable min-width="170"></el-table-column>
      <el-table-column prop="reqIp" label="发起请求的IP" sortable min-width="110"></el-table-column>
      <el-table-column prop="result" label="操作结果" sortable min-width="120"></el-table-column>
      <el-table-column fixed="right" label="操作" align="center" min-width="80">
        <template slot-scope="scope">
          <el-button  @click="updateDialog(scope.row)" type="text" size="small">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
   <!-- 详情 -->
    <el-dialog :title="dialog.title" :visible.sync="dialog.isShow" width="750px" top="60px"  :close-on-click-modal="false" v-dialogDrag >
      <div :style="{'height':(tableHeight-90)+'px','overflow-y':'auto'}">
        <h3 class="dialog-plate-title"><span>日志详情信息</span></h3>
        <el-form :inline="true" :model="dialogList" label-width="120px" class="demo-ruleForm">
          <el-form-item label="操作参数"><el-input v-model="dialogList.operParam" disabled></el-input></el-form-item>
          <el-form-item label="操作人用户名"><el-input v-model="dialogList.username" disabled></el-input></el-form-item>
          <el-form-item label="操作人姓名"><el-input v-model="dialogList.providerNoName" disabled></el-input></el-form-item>
          <el-form-item label="操作"><el-input v-model="dialogList.operation" disabled></el-input></el-form-item>
          <el-form-item label="发起请求的IP"><el-input v-model="dialogList.reqIp" disabled></el-input></el-form-item>
          <el-form-item label="操作结果"><el-input v-model="dialogList.result " disabled></el-input></el-form-item>
          <el-form-item label="操作时间"><el-input v-model="dialogList.reqTime " disabled></el-input></el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import api from 'plugins/axios/api.js';
import {mapState} from 'vuex'
export default {
  data(){
    return {
      search:{},
      machineCodeData:[],
      dialog:{
        title:"",
        isShow:false
      },
      dialogList:{},
      tableData:[],
      pagination:{
        currentPage:1,
        pageSize:10,
        total:0
       }
    }
  },
  watch:{
  },
  computed:{
    ...mapState({clientHeight:state=>state.common.clientHeight}),
    tableHeight(){
      return this.clientHeight-184;
    }
  },
  created(){
     let self =this;
     self.getData();
  },
  methods:{
    getData(){
      let self = this;
      let list = {
        username:self.search.username,
        reqTime:self.search.reqTime
      };
      self.loading = true;
      api.queryLog(list,self.pagination.currentPage,self.pagination.pageSize).then(res=>{ //adscm/system/log/allLog/
        self.loading = false;
        self.tableData= res.content.records;
        self.pagination.total = res.content.total;
      },error=>{
        self.loading = false;
      })
    },
    updateDialog(row){
     let self = this;
     self.dialog.isShow = true;
     self.dialog.title = "日志详情";
     self.dialogList = row;
    },
    handleSizeChange(size) {
      // this.pagination.currentPage = 1;
    this.pagination.pageSize = size;
    this.getData()
    },
    handleCurrentChange  (currentPage) {
    this.pagination.currentPage = currentPage;
    this.getData()
    },
    searchClick(){
      this.getData();
    }
    
  }
}
</script>
<style lang="stylus" scoped>

</style>
